<template>
  <div>
    <!-- <div id="nav">
      <vue-particles
        color="#555"
        :particleOpacity="0.7"
        :particlesNumber="150"
        shapeType="circle"
        :particleSize="4"
        linesColor="#555"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="false"
        clickMode="push"
        class="lizi"
      />
    </div> -->

    <div id="login-container">
      <div style="text-align: center;height: 50px;background-color = Black ">
        登录
      </div>
      <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="账号" prop="user">
          <el-input v-model="ruleForm.user" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item>
          <el-radio v-model="ruleForm.identity" :label="1">学生 </el-radio>
          <el-radio v-model="ruleForm.identity" :label="2">老师</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">登录</el-button>
          <el-button v-if="ruleForm.identity === 1" @click="resetForm()">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 注册页登录 -->
    <el-dialog
      title="注册信息"
      :visible.sync="dialogVisible"
      width="800px"
    >
      <el-form ref="form" :model="registeredForm" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="registeredForm.name" />
        </el-form-item>
        <el-form-item label="学号">
          <el-input v-model="registeredForm.snumber" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="registeredForm.spassword" />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio v-model="registeredForm.sex" label="男生">男生</el-radio>
          <el-radio v-model="registeredForm.sex" label="女生">女生</el-radio>
        </el-form-item>
        <el-form-item label="班级：">
          <el-select v-model="registeredForm.class_id" placeholder="请选择归属班级">
            <el-option v-for="i in classify" :key="i" :label="i" :value="i" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="registered">立即注册</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import api from '@/api'
export default {
  name: 'Login',
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账户'))
      } else {
        if (this.ruleForm.pass !== '') {
          this.$refs.ruleForm.validateField('pass')
        }
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        user: '',
        pass: '',
        identity: 1 // 身份，学生还是老师
      },
      dialogVisible: false,
      rules: {
        user: [
          { validator: validatePass, trigger: 'blur' }
        ],
        pass: [
          { validator: validatePass2, trigger: 'blur' }
        ]
        // age: [
        //   { validator: checkAge, trigger: 'blur' }
        // ]
      },
      classify: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '七年级', '八年级', '九年'],
      registeredForm: {
        sex: '男生'
      },
      isLogin: false
    }
  },
  methods: {
    submitForm() {
      const params = {
        snumber: this.ruleForm.user,
        spassword: this.ruleForm.pass
      }
      // 学生登录
      if (this.ruleForm.identity === 1) {
        this.toWhere('Home')
        api.StudentLogin(params).then(res => {
          if (res.code) {
            this.toWhere('Home')
          } else {
            this.$message.error(res.msg)
          }
        })
      } else {
        api.manageLogin(params).then(res => {
          if (res.code) {
            this.toWhere('Manage')
          } else {
            this.$message.error(res.msg)
          }
        })
      }
      // this.$router.push({path: "/"});
    },
    // 注册
    resetForm() {
      this.dialogVisible = true
    },
    registered() {
      api.registered(this.registeredForm).then(res => {
        if (res.code) {
          this.$message.success('注册成功!')
          this.dialogVisible = false
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped>
  body{
    margin: 0;
  }
  #login-container{
    width: 400px;
    height: 350px;
    background: #e5e9f2;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -220px;
    margin-top: -170px;
    border-radius: 5px;
    padding-top: 40px;
    padding-right: 40px;
  }
</style>
